<template>
  <div>
    <div class="wrapper">
      <div class="content">
        <swiper v-if="showSwiper" class="swiper-imgs" :options="swiperOption">
          <swiper-slide class="swiper-slide-imgs swiper-slide" :key="slide.id" v-for="slide of swiperSlides">
            <a :href="slide.href">
              <img class="imooc-img" :src="slide.banner" alt="">
            </a>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="recommend  one">
          <div class="actual">实战推荐</div>
          <a class="actual more">查看更多 <span>&gt;</span></a>
      </div>
      <div class="recommend-item">
        <a class="item" :href="item.url" v-for="item in actualCombat" :key="item.id">
          <div class="item-img"><img :src="item.img"/></div>
          <div class=" itme-text">
            <div class="item-name">{{item.describe}}</div>
            <div class="item-detail">
              <span class="item-level">{{item.grade}}</span>
              <span class="dot">·</span>
              <span class="item-number"><span class="iconfont icon-ren"></span>{{item.number}}</span>
            </div>
           </div>
          <div class="item itme-price">{{item.price}}</div>
        </a>
        <a class="more">
          查看更多
        </a>
      </div>
      <div class="space">
      </div>
      <div class="employment">
        <div class="employment-class">
          <span class="tit-name">就业班</span>
          <span class="class-desc">快速迈入互联网行业，轻松挑战40W 年薪</span>
        </div>
        <div class="programme">
          <div class="java language">
            <img src="http://img1.mukewang.com/5cd9296209c120a305010240.jpg" alt="">
          </div>
          <div class="web language">
            <img src="http://img1.mukewang.com/5cd9295909dd531b05010240.jpg" alt="">
          </div>
          <div class="android language">
            <img src="http://img2.mukewang.com/5cd9296d09f40d2805010240.jpg" alt="">
          </div>
          <div class="php language">
            <img src="http://img3.mukewang.com/5cd929a809d60e6d05010240.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="space-two">
      </div>
      <div class="recommend  two">
        <div class="actual">新上好课</div>
      </div>
      <div class="recommend-item">
        <a class="item" :href="item.url" v-for="item in classNew" :key="item.id">
          <div class="item-img"><img :src="item.img"/></div>
          <div class=" itme-text">
            <div class="item-name">{{item.describe}}</div>
            <div class="item-detail">
              <span class="item-level">{{item.grade}}</span>
              <span class="dot">·</span>
              <span class="item-number"><span class="iconfont icon-ren"></span>{{item.number}}</span>
            </div>
          </div>
          <div class="item itme-price">{{item.price}}</div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import indexHeader from '@/pages/public/Header'
import BScroll from 'better-scroll'
import index from '@/api/index'
export default {
  name: 'Index',
  components: {
    indexHeader: indexHeader
  },
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true,
        autoplay: 3000,
        speed: 1000,
        centeredSlides: true
      },
      swiperSlides: Array,
      classNew: Array,
      actualCombat: Array
      // swiperSlides: [ 'https://img4.mukewang.com/5cfd2be70902f88109000300.jpg', 'https://img2.mukewang.com/5d005ef9092b835e18000600.jpg', 'https://img3.mukewang.com/szimg/5d005fdf08b4006f09000300.jpg' ]
    }
  },
  methods: {
  },
  mounted () {
    index.banner().then(res => {
      res = res.data
      this.swiperSlides = res
    })
    index.actualCombat().then(res => {
      res = res.data
      this.actualCombat = res
    })
    index.classNew().then(res => {
      res = res.data
      this.classNew = res
    })
    // let scroll = new BScroll('.wrapper')
    let scroll = new BScroll(this.$refs.wrapper)
    // setInterval(() => {
    //   console.log('simulate async data')
    //   if (this.swiperSlides.length < 10) {
    //     this.swiperSlides.push(this.swiperSlides.length + 1)
    //   }
    // }, 3000)
  },
  computed: {
    showSwiper () {
      return this.swiperSlides.length > 1
    }
  }
}
</script>

<style lang="stylus" scoped>
  .swiper-slide-next,.swiper-slide-prev
    transition: transform 1.0s;
    transform: scaleX(.97) scaleY(.8);
  .wrapper
    height 1079px
    margin-top  225px
    .content
      background-color #fff
      padding-bottom 15px
      .swiper-imgs
        padding-left 25px
        padding-right 25px
        .swiper-slide-imgs
          height 235px
          .imooc-img
            width 100%
            height 100%
            border-radius 20px
    .recommend
      background-color #fff
      padding-left 40px
      padding-right 40px
      padding-top 50px
      margin-top 10px
      padding-bottom 45px
      display flex
      .actual
        flex-grow: 1
        justify-content: space-between
        font-size 35px/*px*/
      .more
        text-align right
        font-size 23px/*px*/
        color #b7bbbf
    .one
      background-image url('https://m.imooc.com/static/wap/static/img/index/title-bg-1.png')
      background-repeat no-repeat
      background-position-x: .32rem
      background-position-y: .32rem
      box-sizing: border-box;
    .two
        background-image url('https://m.imooc.com/static/wap/static/img/index/title-bg-1.png')
        background-repeat no-repeat
        background-position-x: .32rem
        background-position-y: .32rem
        box-sizing: border-box;
    .recommend-item
      background-color #fff
      padding-left 30px
      padding-right 30px
      a.item
        color #2b3378
        display flex
        align-items: center;
        width 100%
        height 125px
        padding-top 10px
        padding-bottom 20px
        .item-img
          img
            width 180px
            height 125px
            border-radius 10px
        .itme-text
          display flex
          /*align-items: center;*/
          width 300px
          flex-wrap wrap
          margin-left 25px
          margin-right 40px
          .item-name
            font-size 33px/*px*/
            width 300px
            height 65px
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
            word-wrap: break-word;
          .item-detail
            width 300px
            margin-top 20px
            font-size 28px/*px*/
            opacity .8
            .icon-ren
              font-size 30px/*px*/
              margin-right 10px
            .dot
              margin-left 15px
              margin-right 15px
        .itme-price
          width 140px
          height 65px
          line-height 65px
          background-color #f3f3f3
          border-radius 30px
          text-align center

      a.more
        font-size 30px/*px*/
        display block
        width 100%
        text-align center
        margin-top 50px
        margin-bottom 50px
    .space
      width 100%
      height 15px
      background-color #f8fafc
    .space-two
      width 100%
      height 30px
      background-color #f8fafc
    .employment
      margin-top 15px
      background-image url('https://m.imooc.com/static/wap/static/img/index/title-bg-2.png')
      background-repeat no-repeat
      background-position-x: .32rem
      background-position-y: .32rem
      box-sizing: border-box;
      padding-bottom 20px
      .employment-class
        height 120px
        line-height 120px
        padding-left 40px
        .tit-name
          font-size 40px
          margin-right 45px
        .class-desc
          opacity: .8;
    .programme
      padding-left 30px
      padding-right 30px
      .java,.android
        margin-right 10px
      .language
        height 160px
        width 335px
        display inline-block
        img
          width 100%
          height auto
</style>
